/* Utility Styles
   Simple modifiers that can be applied to multiple elements */

.text--tiny {
  font-size: $font-size-tiny;
  line-height: $font-line-height;
}

.text--small {
  font-size: $font-size-small;
  line-height: $font-line-height;
}

.text--medium {
  font-size: $font-size-medium;
  line-height: $font-line-height;
}

.text--large {
  font-size: $font-size-large;
  line-height: $font-line-height;
}

.text--caps {
  font-family: 'Jost', Futura, sans-serif;
  text-transform: uppercase;
}

.text--small-caps {
  font-variant-caps: all-small-caps;
}

.text--hidden {
  position: absolute;
  height: 1px;
  width: 1px;
  clip: rect(1px,1px,1px,1px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  overflow: hidden !important;
}

.text--centered {
  text-align: center;
}

.text--info {
  color: $color-info;

  &:before {
    content: 'ℹ️';
  }
}

.text--warning {
  color: $color-warn;

  &:before {
    content: '⚠️ ';
  }
}

.aspect-16-9 {
  padding-bottom: 56.25%;
  position: relative;
}

.aspect-16-9 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.u-centered-content {
  max-width: 775px;
  margin: 0 auto;
  padding: 0 25px;

  @media screen and (max-width: 1000px) {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  @media screen and (max-width: 680px) {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.u-centered-content--small {
  max-width: 625px;
}

.u-centered-content--large {
  max-width: 925px;
}

.u-centered-content--xlarge {
  max-width: 1075px;
}

.u-dark-zone {
  @include metalPanel();
  
  @media screen and (max-width: 680px) {
    margin-left: -25px;
    margin-right: -25px;
  }
}

.u-light-zone {
  padding: 0.5rem 1.5rem;
  @extend %scanlines;

  @media screen and (max-width: 680px) {
    margin-left: -25px;
    margin-right: -25px;
  }

  strong {
    color: black;
  }
}

.u-light-zone + .u-dark-zone {
  margin-top: 1px;
}

.u-light-zone,
.u-light-zone a,
.u-light-zone h1,
.u-light-zone h2,
.u-light-zone h3,
.u-light-zone h4 {
  color: rgb(43, 43, 48);
  text-decoration-color: currentColor;
}

.u-light-zone a:hover {
  color: black;
}

.u-padding {
  padding: 1.25rem 1.5rem;
}

.u--no-padding {
  padding: 0;
}

.u-float-right {
  float: right;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.u-placeholder {
  display: inline-block;
  background: currentColor;
  opacity: 0.25;
  height: 1rem;
  width: 50%;
  border-radius: 2px;
}

.u-mobile-full-width {
  @media screen and (max-width: 680px) {
    width: 100vw;
    max-width: 100vw;
    margin-left: -25px;
    margin-right: -25px;
    overflow-x: auto;
  }
}

.u-two-column {
  column-count: 2;
  column-gap: 25px;

  @media screen and (max-width: 680px) {
    column-count: 1;
  }
}

.list--no-style {
  list-style-type: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0;

  > li {
    padding-left: 0;
  }
}

.list--horizontal {
  > li {
    display: inline-block;
  }
}

.color--discord {
  color: $color-discord !important;
}

.color--itch {
  color: $color-itch !important;
}

.color--facebook {
  color: $color-facebook !important;
}

.color--twitter {
  color: $color-twitter !important;
}

.color--reddit {
  color: $color-reddit !important;
}

.color--youtube {
  color: $color-youtube !important;
}

.color--playing {
  color: green;
}

.color--waiting {
  color: orange;
}

.color--gold {
  @extend %gold;
}

.color--cnc {
  color: $color-command-and-conquer;
}

.color--ra {
  color: $color-red-alert;
}

.color--d2k {
  color: $color-dune-2000;
}

.color--ts {
  color: $color-tiberian-sun;
}